// 获取元素结点
const addBtn = document.querySelector('.addBtn');
const doubleBtn = document.querySelector('.doubleBtn');
const showBtn = document.querySelector('.showBtn');
const sortBtn = document.querySelector('.sortBtn');
const calculateBtn = document.querySelector('.calculateBtn');

const mainContent = document.querySelector('.mainContent');


// 保存数据
let data = [];

// 加载页面，使得页面一开始就有三条数据。
addUser();
addUser();
addUser();
// 监听事件

addBtn.addEventListener('click', addUser);
doubleBtn.addEventListener('click', doubleMoney);
showBtn.addEventListener('click', showOnly);
sortBtn.addEventListener('click', sortByRichest);
calculateBtn.addEventListener('click', calculateMoney);

// 响应函数

// 添加用户 请求网址：https://randomuser.me/api/
async function addUser() {
  // 插入新元素之前，先将计算total的标签清除掉
  removeDom(".total");
  const url = "https://randomuser.me/api/";
  let results = await request(url);
  let result = JSON.parse(results);
  const userName = result.results[0].name.first + ' ' + result.results[0].name.last;
  const money = Math.floor(Math.random() * (90000000 - 1));
  data.push({
    userName,
    money
  });
  // console.log(data);

  // 创建新的元素，插入元素。
  createDom(userName, money);
}

// 双倍金额
function doubleMoney() {
  let dataS = data.map(item => {
    item.money = item.money * 2;
    return item;
  });
  // console.log('double', dataS);
  // 获取所有类为item的元素
  let items = document.querySelectorAll('.item1');
  for (let i = 0; i < items.length; i++) {
    const span = items[i].querySelector('span');
    span.innerText = `￥ ${dataS[i].money}`;
  }
  const domExist = mainContent.querySelector('.total');
  if (domExist) {
    const sum = data.reduce((add, item) => add + item.money, 0);
    let span = domExist.querySelector('span');
    span.innerText = `￥ ${sum}`;
  }
}

// 显示小于百万的用户
function showOnly() {
  // 删除节点，removeChild(node)删除指定的孩子节点
  // let items = mainContent.querySelectorAll('.item1');
  // items.forEach(item => mainContent.removeChild(item));
  removeDom('.item1');
  removeDom('.total');
  data = data.filter(item => item.money < 10000000);
  // 创建节点，加入节点
  data.forEach(item => createDom(item.userName, item.money));
  // console.log(dataFiler);
}

// 排序，从低到高
function sortByRichest() {
  //dom节点要重新排序，想到的是，先删除原有节点，然后再创建节点
  // let items = mainContent.querySelectorAll('.item1');
  // items.forEach(item => mainContent.removeChild(item));
  removeDom('.item1');
  removeDom('.total');
  data.sort((a, b) => a.money - b.money);
  data.forEach(item => createDom(item.userName, item.money));
}

// 计算总值
function calculateMoney() {
  const domExist = mainContent.querySelector('.total');
  if (!domExist) {
    const sum = data.reduce((add, item) => add + item.money, 0);
    // 单独创建一个新的结点
    let div = document.createElement('div');
    div.innerHTML = `<h3>Total:</h3><span>￥ ${sum}</span>`;
    div.classList = "item total";
    mainContent.appendChild(div);
  }
}

// 发送ajax请求
function request(url) {
  return new Promise((resole, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send()
    xhr.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status >= 200 && this.status < 300) {
          resole(xhr.response);
        } else {
          reject(`获取数据失败！状态码为${this.status}`);
        }
      }
    }
  })
}

// 创建新的元素，插入元素
function createDom(userName, money) {
  let div = document.createElement('div');
  div.innerHTML = `<h3>${userName}</h3><span>￥ ${money}</span>`;
  div.className = 'item1';
  mainContent.appendChild(div);
}

// 删除节点
function removeDom(target) {
  let items = mainContent.querySelectorAll(target);
  if (items) {
    items.forEach(item => mainContent.removeChild(item));

  }
}